<template>
    <div>
        <h2 class="h2"><span>军籍信息表--军队无军籍离退休职工</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm qita" id="qita" accept-charset="UTF-8">
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item class="select2" label="离退干部安置单位性质：" prop="E009">
                            <el-select v-model="ruleForm.E009" placeholder="离退干部安置单位性质">
                                <el-option label="政府管理" value="1"></el-option>
                                <el-option label="军队管理" value="2"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item class="select2" label="安置计划批次：" prop="E011">
                            <el-select v-model="ruleForm.E011" placeholder="安置计划批次">
                                <el-option label="无" value="1"></el-option>
                                <el-option label="一批" value="2"></el-option>
                                <el-option label="二批" value="3"></el-option>
                                <el-option label="三批" value="4"></el-option>
                                <el-option label="六批" value="5"></el-option>
                                <el-option label="2015" value="6"></el-option>
                                <el-option label="2017" value="7"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="接收时间：" prop="E012">
                            <el-date-picker v-model="ruleForm.E012" type="date" placeholder="接收时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="个人月均离退休金总额：" prop="E013">
                            <el-input v-model="ruleForm.E013" id="E013" placeholder="个人月均离退休金总额"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item class="select2" label="家庭购买房改住房情况：" prop="E014">
                            <el-select v-model="ruleForm.E014" placeholder="家庭购买房改住房情况">
                                <el-option label="已购房  " value="1"></el-option>
                                <el-option label="已确定购房意向" value="2"></el-option>
                                <el-option label="未购房" value="3"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所房改住房性质：" prop="E015">
                            <el-input v-model="ruleForm.E015" id="E015" placeholder="所房改住房性质"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                         <el-form-item label="房改住房购房主体：" prop="E016">
                            <el-radio-group v-model="ruleForm.E016">
                                <el-radio label="本人"></el-radio>
                                <el-radio label="配偶"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所购房改住房面积：" prop="E017">
                            <el-input v-model="ruleForm.E017" id="E017" placeholder="所房改住房性质(平米)"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="sanjiliandong">
                    <el-form-item label="安置地点：">
                        <linkage @hujisuozaidifn="hujisuozaidifnsss"></linkage>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20" class="sanjiliandong">
                    <el-form-item label="所购房该住房地址：">
                        <linkage @hujisuozaidifn="hujisuozaidifnsss2"></linkage>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import linkage from '@/components/element/linkage'
export default {
    data(){
        return {
            hujisuozaidiData:[],
            ruleForm: { //默认数据
                E009:'',//离退干部安置单位性质
                E011:'',//安置计划批次
                E012:'',//接收时间
                E013:'',//个人月均离退休金总额
                E014:'',//家庭购买房改住房情况
                E015:'',//所房改住房性质
                E016:'',//房改住房购房主体
                E017:'',//所购房改住房面积
            },
            rules: {  //规则
                E012:[
                    { type: 'date', required: true, message: '请选择接收时间', trigger: 'change' }
                ],
                E009:[
                    { required: true, message: '请填写离退干部安置单位性质', trigger: 'change' },
                ],
                E011:[
                    { required: true, message: '请填写安置计划批次', trigger: 'change' },
                ],
                E013:[
                    { required: true, message: '请填写个人月均离退休金总额', trigger: 'blur' },
                ],
                E014:[
                    { required: true, message: '请填写家庭购买房改住房情况', trigger: 'change' },
                ],
                E015:[
                    { required: true, message: '请填写所房改住房性质', trigger: 'blur' },
                ],
                E016:[
                    { required: true, message: '请填写房改住房购房主体', trigger: 'change' },
                ],
                E017:[
                    { required: true, message: '请填写所购房改住房面积', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('成功，tuiyishibing!');
                    console.log(this.ruleForm)
                    this.$emit('submitfn',2)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        hujisuozaidifnsss(value){
            console.log(value)
            this.hujisuozaidiData = value
        },
        hujisuozaidifnsss2(value){
            console.log(value)
        }
    },
    components:{
        linkage
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>